<script setup lang="ts">
import { getTime } from '@/utils/time';
import { baseImgPath } from '@/utils/env';
import type { articleData } from "@/utils/interface";
import { useRouter } from 'vue-router';

const props = defineProps({
    articleList: {
        type: Array<articleData>,
        default: () => []
    }
})
const router = useRouter();

const goToArticle = (id: number) => {
    router.push({
        name: 'articleDetail',
        params: { id }
    })
}
</script>

<template>
    <div v-for="item in props.articleList" :key="item.id" @click="goToArticle(item.id)"
        class="relative group rounded-4xl overflow-hidden
        sm:m-1 sm:p-6 sm:w-[300px] sm:h-[175px]
        md:m-2 md:p-8 md:w-[400px] md:h-[225px]
        lg:m-5 lg:p-10 lg:w-[600px] lg:h-[350px]
          shadow-1 hover:shadow-2 duration-700 bg-gradient-to-br from-white to-gray-50">
        <div class="flex space-x-5 
        sm:mb-2 md:mb-3 lg:mb-5">
            <img v-if="item.cover" :src="`${baseImgPath}/${item.cover}`" alt="01" 
                class="shadow-xl/30 border-white border-2 group-hover:-translate-y-1/6 transition-transform duration-300 object-cover rounded-lg
                sm:w-[100px] sm:h-[70px] 
                md:w-[150px] md:h-[120px] 
                lg:w-[250px] lg:h-[200px] " />
            
            <div class="sm:space-y-0.5 md:space-y-0.5 lg:space-y-2 flex-1">
                <h1 class="font-bold text-gray-800 group-hover:text-blue-600 transition-colors duration-300 break-words hyphens-auto
                sm:text-sm sm:line-clamp-1 sm:font-semibold
                md:text-lg  md:line-clamp-1 md:font-bold
                lg:text-2xl lg:line-clamp-2 lg:font-bold
                ">{{
                    item.title }}</h1>
                <p class="text-gray-500 group-hover:text-blue-500 transition-colors duration-300 font-medium
                sm:text-xs
                md:text-sm
                lg:text-base">
                    发布于{{ getTime(item.created_at) }}
                </p>
                <div class="flex items-center cursor-pointer text-gray-600 group-hover:text-blue-500 transition-colors duration-300">
                    <svg class="icon mr-1" aria-hidden="true">
                        <use xlink:href="#icon-pinglun"></use>
                    </svg>
                    <p class="font-medium
                    sm:text-xs 
                    md:text-sm
                    lg:text-base">{{ item.comment }} 评论</p>
                </div>
                <div  class="flex flex-wrap gap-2">
                    <div v-for="(tag, index) in item.label" :key="tag" :class="[
                        'inline-block px-2 py-1 rounded-full font-medium transition-all duration-300 transform hover:scale-105',
                        index % 3 === 0 ? 'bg-gradient-to-r from-sky-100 to-sky-50 text-sky-700 border border-sky-200 hover:from-sky-200 hover:to-sky-100' :
                            index % 3 === 1 ? 'bg-gradient-to-r from-amber-100 to-amber-50 text-amber-700 border border-amber-200 hover:from-amber-200 hover:to-amber-100' :
                                'bg-gradient-to-r from-rose-100 to-rose-50 text-rose-700 border border-rose-200 hover:from-rose-200 hover:to-rose-100',
                        'sm:hidden',
                        'md:block md:text-xs',
                        'lg:block lg:text-sm'
                    ]">
                        {{ tag }}
                    </div>
                </div>
            </div>
        </div>
        <p class="absolute left-8 line-clamp-3 text-gray-600 group-hover:text-gray-800 transition-colors duration-300 font-medium indent-8
        sm:top-27 sm:text-xs
        md:top-43 md:text-sm  md:line-clamp-2
        lg:top-65 lg:text-base lg:line-clamp-3 ">
           {{ item.introduce || '暂无简介' }}
        </p>
    </div>
</template>

<style scoped>
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.icon--large {
    width: 2em;
    height: 2em;
}

/* 卡片悬停效果 */
.group:hover {
    transform: translateY(-2px);
}

/* 标题字体优化 */
h1 {
    font-family: 'Helvetica Neue', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0.02em;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* 日期字体优化 */
p {
    font-family: 'Helvetica Neue', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0.01em;
}

/* 标签字体优化 */
div[class*="bg-gradient-to-r"] {
    font-family: 'Helvetica Neue', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 卡片背景优化 */
div[class*="bg-gradient-to-br"] {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 图片悬停效果 */
img {
    transition: all 0.3s ease;
}
</style>
